-前集提要-

提到了使用CSS指令語法讓網頁呈現的文字會有變化

還有網頁的版面配置，可以使用的語法指令，例如：box-sizing、box model、border-darius、box-shadow 等等的語法指令。都是可以使網頁的版面配置可以依照想要規格呈現。

這次要來講display的屬性

設計CSS版面配置中，是最重要的屬性。每個HTML元素都有一個預設的display值，不同的元素屬性，會有不同的預設值。

然而，display屬性，它的預設值是為block或inline其中一個。若該元素的display屬性被標示為block就被稱為區塊元素；而被標示為inline則稱為行內元素。

display：block
● 可以指定寬度(width) 和 高度(height)
● 可以設定上下左右外距(margin)
● 可以設定上下左右內距(padding)
● 元素會由上而下「自動換行配置」(若有另外設定 float 或 position 時例外)
● 無法設定垂直對齊(vertical-align)屬性，元素內容(文字)會永遠靠上對齊。
但可以藉由 line-height 屬性解決文字內容垂直置中對齊的問題。
● 預設為此屬性的是區塊類型元素：div、ul、dl、p、h1~h6 …等

display：inline
● 無法指定寬度(width)和高度(height)，尺寸非固定會受 padding 值的影響。
● 只能設定左右外距(margin-left & margin-right)，無法設定上下外距(margin-top & margin-bottom)
● 可以設定上下左右內距(padding)
● 元素不會自動換行配置，只要沒有使用br元素強制換行，會在同一列一直顯示至空間不足才會換到下一行。
● 相鄰的文字(同一列中)和inline元素之間可以垂直置中對齊。
● 再搭配設定行高(line-height)的情況下，可以指定與相鄰文字的垂直對齊(vertical-align)方式(※但不包括自身文字內容)
● 預設為此屬性的是文字類型元素：span、a、strong、small.....等。

display：inline-block

(與inline一樣不會自動換行，但卻是以block元素盒子的方式顯示)
● 可以指定寬度(width)和高度(height)
● 可以設定上下左右外距(margin)
● 可以設定上下左右內距(padding)
● 元素不會自動換行配置，只要沒有使用 br 元素強制換行，會在同一列一直顯示至空間不足才會換到下一行。
● 可在父元素設定text-align屬性，能指定區塊在父元素中的水平對齊方式。
● 可以設定垂直對齊(vertical-align)屬性，指定垂直對齊的方式。
● 預設為此屬性的類型元素有：img、input、select、button.....等。